<template>
  <div class="spec-basic-info">
    <!--    spu参数配置-规格项基础信息-->
    <Card
      :bodyStyle="{
        position: 'relative',
        background: '#f2f2f2',
        padding: '15px 30px 0 25px',
        border: '1px solid #d9d9d9',
      }"
    >
      <Form
        ref="formRef"
        :rules="rules"
        :model="formModel"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
      >
        <Row>
          <Col span="6" v-for="item in specItemFormSchema" :key="item.field">
            <FormItem :label="item.label" :name="item.field" @click.stop>
              <div
                @mouseenter="handleSortableDisabled(true)"
                @mouseleave="handleSortableDisabled(false)"
              >
                <Input v-if="item['component'] === 'Input'" v-model:value="formModel[item.field]" />
                <InputNumber
                  v-if="item['component'] === 'InputNumber'"
                  v-model:value="formModel[item.field]"
                />
                <Select
                  allowClear
                  v-if="item['component'] === 'Select'"
                  v-model:value="formModel[item.field]"
                >
                  <SelectOption
                    v-for="option in item.componentProps ? item.componentProps['options'] : []"
                    :key="option.value"
                    :value="option.value"
                    >{{ option.label }}</SelectOption
                  >
                </Select>
              </div>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <Icon
        size="20"
        class="remove-btn"
        icon="clarity:remove-solid"
        @click="handleRemove"
        @mouseenter="handleSortableDisabled(true)"
        @mouseleave="handleSortableDisabled(false)"
      />
      <Button
        :type="'primary'"
        class="add-btn"
        @click="handleChooseBizMetaAttr"
        @mouseenter="handleSortableDisabled(true)"
        @mouseleave="handleSortableDisabled(false)"
        >选择元属性</Button
      >
    </Card>

    <BizMetaAttrModal :if-single="true" @register="registerModal" @ok="handleChooseBizMetaAttrOk" />
  </div>
</template>

<script setup lang="ts">
  import { computed, inject, ref } from 'vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { useModal } from '@/components/Modal';
  import type { Rule } from 'ant-design-vue/es/form';
  import { useMessage } from '@/hooks/web/useMessage';
  import { SpuSpecModel } from 'mc-c2b2m-operator-api/types/spu';
  import { specItemFormSchema } from '@/views/spu/spu/setting/data';
  import BizMetaAttrModal from '@/components/BizMetaAttrModal/Index.vue';
  import {
    Row,
    Col,
    Card,
    Form,
    Input,
    Button,
    Select,
    FormItem,
    InputNumber,
    SelectOption,
  } from 'ant-design-vue';

  const props = defineProps({
    // 当前组件索引
    curIndex: {
      type: Number,
      default: 0,
    },
    // 规格项数据源
    specItem: {
      type: Object as PropType<SpuSpecModel>,
      default: () => {
        return {};
      },
    },
  });

  const formRef = ref();
  const rules = ref<Record<string, Rule[]>>({});
  specItemFormSchema.forEach((schema) => {
    const { label, field, required } = schema;
    required &&
      (rules.value[field] = [
        { required: true, message: `${label}必填！`, trigger: ['blur', 'change'] },
      ]);
  });
  const emits = defineEmits(['remove', 'chooseOk', 'update:specItem']);
  const { createConfirm } = useMessage();
  const [registerModal, { openModal, closeModal }] = useModal();

  // 表单数据模型
  const formModel = computed({
    get: () => props.specItem,
    set: (val) => emits('update:specItem', val),
  });
  // 删除操作
  function handleRemove() {
    createConfirm({
      title: '提示',
      iconType: 'warning',
      content: '是否确认删除？',
      onOk: () => {
        emits('remove');
      },
    });
  }
  // 选择元属性
  function handleChooseBizMetaAttr() {
    openModal(true, { ...props.specItem });
  }
  // 选择元属性成功
  function handleChooseBizMetaAttrOk(data: any) {
    closeModal();
    emits('chooseOk', data);
  }
  const handleSortableDisabled: any = inject('handleSortableDisabled');

  defineExpose({ formRef });
</script>

<style scoped lang="less">
  .spec-basic-info {
    .remove-btn {
      top: 5px;
      right: 5px;
      cursor: pointer;
      position: absolute;
    }
    .add-btn {
      right: 10px;
      bottom: 10px;
      position: absolute;
    }
  }
</style>
